﻿
@{
    ViewBag.Title = "用户管理";
}

<div class="row col-md-12 ml-0" style="min-height:5vh;">
    <strong class="font-rfs" style="margin-right: 2rem;padding-top: 0.4rem;">用户管理</strong>
</div>
<div class="row col-md-12 ml-0 pre-scrollable" style="min-height:90vh;">
    <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-3" style="min-height:90vh;">
        <div class="row col-md-12 tab-content" style="padding-left: 0;padding-right: 0px;right: -15px;height: 3vh;">
            <ul class="nav col-md-12" style="padding-right: 0;margin-bottom: 1px;">
                <li id="li-tabUserList" class="tabButton col-md-3 tab-first-active font-rfs" style="text-align:center;padding-left: 1px;padding-right: 1px;" data-active="true">
                    <a id="a-tabUserList" href="#tabUserList" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">用户列表</a>
                </li>
                <li class="col-md-9 tab-Notactive" style="text-align: center;"><a href="" data-toggle="tab"></a></li>
            </ul>
        </div>
        <div class="row col-md-12 tab-content tab-body" style="padding-right: 0px;right: -15px;padding-left: 0px;top: -2px;min-height: 87vh;">
            <div class="col-md-12 ml-0 mr-0 tab-pane active" id="tabAnalyte" style="padding-left: 0px;padding-right: 0px;">
                <div class="row col-md-12" style="min-height:3vh;">
                    <button id="UserManager-AddUser" class="btn btn-rfs"><i class="bi-person-fill-add" style="color:#007bff"></i> 添加</button>
                    <button id="UserManager-RemoveUser" class="btn btn-rfs"><i class="bi-person-fill-dash" style="color:red"></i> 删除</button>
                    <button id="UserManager-SetPassword" class="btn btn-rfs"><i class="bi-gear"></i> 修改密码</button>
                </div>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12">
                    <table id="UserManager-tabUser" class="table table-striped table-bordered table-sm table-hover">
                        <thead>
                            <tr>
                                <th>登录名</th>
                                <th>姓名</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row rounded col-md-9 ml-1" style="min-height:90vh;">
        <div class="row col-md-12 tab-content" style="padding-left: 0;padding-right: 0px;right: -15px;height: 3vh;">
            <ul class="nav col-md-12" style="padding-right: 0;margin-bottom: 1px;">
                <li id="li-tabUserBaseInfo" class="tabButton col-md-1 tab-first-active font-rfs" style="text-align:center;padding-left: 1px;padding-right: 1px;" data-active="true">
                    <a id="a-tabUserInfo" href="#tabUserInfo" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">基本信息</a>
                </li>
                <li id="li-tabAttachment" class="tabButton col-md-1 tab-other-noactive font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;" data-active="false">
                    <a id="a-tabAttachment" href="#tabAttachment" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">附件管理</a>
                </li>
                <li id="li-tabRole" class="tabButton col-md-1 tab-other-noactive font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;" data-active="false">
                    <a id="a-tabRole" href="#tabRole" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">角色关系</a>
                </li>
                <li class="col-md-9 tab-Notactive" style="text-align: center;"><a href="" data-toggle="tab"></a></li>
            </ul>
        </div>
        <div class="row col-md-12 tab-content tab-body" style="padding-right: 0px;right: -15px;padding-left: 0px;top: -2px;min-height: 87vh;">
            <div class="col-md-12 ml-0 mr-0 tab-pane active" id="tabUserInfo" style="padding-left: 0px;padding-right: 0px;">@*基本信息*@
                <div class="row col-md-12" style="min-height:3vh;">
                    <button id="UserManager-SaveUser" class="btn btn-rfs"><i class="bi-database-fill-up" style="color:#007bff"></i> 保存</button>
                </div>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12" style="height:82vh;overflow-x:auto">
                    <table id="UserManager-tabCV" class="table table-sm">@*用户简历*@
                        <tbody>
                            <tr style="height:1vh;">
                                <td style="width:1%;border-top:0;"></td>
                                <td style="width:3%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:13%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:13%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:7%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:1%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:6%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:12%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:6%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:1%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:7%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:13%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:13%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:3%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:1%;border-top:0"></td>
                            </tr>
                            <tr style="height:1vh;">
                                <td style="border-top:0" colspan=5></td>
                                <td style="background:url(/StaticFile/head_left.png) no-repeat;background-size:cover;border-top:1px"></td>
                                <td style="background-color:#5d6b98;border-top:0" colspan=3></td>
                                <td style="background:url(/StaticFile/head_right.png) no-repeat;background-size:cover;border-top:1px"></td>
                                <td style="border-top:0" colspan=5></td>
                            </tr>
                            @*姓名*@
                            <tr style="height:2vh;">
                                <td style="border-top:0" colspan=2></td>
                                <td style="border-top:0;padding-bottom:0;" colspan=2>
                                    <input id="FullName" class="font-rfs" style="color:#5d6b98;font-size:calc(0.7em + 0.6vw);font-weight: bold;border:none" placeholder="姓名"/>
                                </td>
                                <td style="border-top:0" colspan=12></td>
                            </tr>
                            @*职位*@
                            <tr style="height:2vh;">
                                <td style="border-top:0" colspan=2></td>
                                <td style="border-top:0;padding-top:0;" colspan=2>
                                    <input id="JobTitle" class="font-rfs" style="color:#5d6b98;font-size:calc(0.4em + 0.6vw);font-weight: bold;border:none" placeholder="职位"/>
                                </td>
                                <td style="border-top:0" colspan=12></td>
                            </tr>
                            @*生日/入职*@
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;"><i class="bi-calendar3" style="color:#5d6b98;"></i> 出生年月：</td>
                                <td style="padding-top:0.3vh;"><input id="DateOfBirth" class="font-rfs" style="color:gray;border:none"/></td>
                                <td class="font-rfs" style="color:gray;" colspan=3><i class="bi-calendar3" style="color:#5d6b98;"></i> 入职日期：</td>
                                <td style="padding-top:0.3vh;" colspan=2><input id="EmploymentDate" class="font-rfs" style="color:gray;border:none" /></td>
                                <td style="border-top:0;text-align:center;line-height:10vh;" colspan=4 rowspan=4><img id="Head"/></td>
                            </tr>
                            @*民族/性别*@
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;"><i class="bi-person-lines-fill" style="color:#5d6b98;"></i> 民族：</td>
                                <td style="padding-top:0.3vh;"><input id="Nation" class="font-rfs" style="color:gray;border:none"/></td>
                                <td class="font-rfs" style="color:gray;" colspan=3><i class="bi-person-lines-fill" style="color:#5d6b98;"></i> 性别：</td>
                                <td style="padding-top:0.3vh;" colspan=2><input id="Sex" class="font-rfs" style="color:gray;border:none"/></td>
                                <td style="border-top:0" colspan=4></td>
                            </tr>
                            @*籍贯/学历*@
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;"><i class="bi-person-lines-fill" style="color:#5d6b98;"></i> 籍贯：</td>
                                <td style="padding-top:0.3vh;"><input id="NativePlace" class="font-rfs" style="color:gray;border:none"/></td>
                                <td class="font-rfs" style="color:gray;" colspan=3><i class="bi-mortarboard-fill" style="color:#5d6b98;"></i> 学历：</td>
                                <td style="padding-top:0.3vh;" colspan=2><input id="Education" class="font-rfs" style="color:gray;border:none" /></td>
                                <td style="border-top:0" colspan=4></td>
                            </tr>
                            @*面貌/专业*@
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;"><i class="bi-person-lines-fill" style="color:#5d6b98;"></i> 政治面貌：</td>
                                <td style="padding-top:0.3vh;"><input id="Politic" class="font-rfs" style="color:gray;border:none" /></td>
                                <td class="font-rfs" style="color:gray;" colspan=3><i class="bi-mortarboard-fill" style="color:#5d6b98;"></i> 所学专业：</td>
                                <td style="padding-top:0.3vh;" colspan=2><input id="Major" class="font-rfs" style="color:gray;border:none" /></td>
                                <td style="border-top:0" colspan=4></td>
                            </tr>
                            @*电话/院校*@
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;"><i class="bi-phone-vibrate-fill" style="color:#5d6b98;"></i> 联系电话：</td>
                                <td style="padding-top:0.3vh;"><input id="PhoneNumber" class="font-rfs" style="color:gray;border:none"/></td>
                                <td class="font-rfs" style="color:gray;" colspan=3><i class="bi-buildings-fill" style="color:#5d6b98;"></i> 毕业院校：</td>
                                <td style="padding-top:0.3vh;" colspan=6><input id="WentToSchool" class="font-rfs" style="width:100%;color:gray;border:none" /></td>
                            </tr>
                            @*邮箱/住址*@
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;"><i class="bi-envelope-at-fill" style="color:#5d6b98;"></i> 电子邮箱：</td>
                                <td style="padding-top:0.3vh;"><input id="Email" class="font-rfs" style="color:gray;border:none" /></td>
                                <td class="font-rfs" style="color:gray;" colspan=3><i class="bi-geo-alt-fill" style="color:#5d6b98;"></i> 家庭住址：</td>
                                <td style="padding-top:0.3vh;" colspan=6><input id="Address" class="font-rfs" style="width:100%;color:gray;border:none" /></td>
                            </tr>
                            @*空行*@
                            <tr style="height:0.5vh">
                                <td style="border-top:0;" colspan=2></td>
                                <td colspan=11></td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            @*教育经历*@
                            <tr style="height:1vh">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="background-color:#5d6b98;color:white;font-weight:bold;border-bottom: 2px solid #5d6b98;"><i class="bi-mortarboard"></i> 教育经历</td>
                                <td style="background:url(/StaticFile/big_right.png) no-repeat;border-top:1px;border-bottom: 2px solid #5d6b98;"></td>
                                <td colspan=9 style="border-top:0; border-bottom: 2px solid #5d6b98;"></td>
                            </tr>
                            <tr style="height:3vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td colspan=11>
                                    <textarea id="EducationalBackground" class="font-rfs" rows=3 style="color:gray;border:none;width:100%;"></textarea>
                                </td>
                                <td style="border-top:0"></td>
                            </tr>
                            @*工作经历*@
                            <tr style="height:1vh">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="background-color:#5d6b98;color:white;font-weight:bold;border-bottom: 2px solid #5d6b98;"><i class="bi-list-stars" style="color:white"></i> 工作经历</td>
                                <td style="background:url(/StaticFile/big_right.png) no-repeat;border-top:1px;border-bottom: 2px solid #5d6b98;"></td>
                                <td colspan=9 style="border-top:0; border-bottom: 2px solid #5d6b98;"></td>
                            </tr>
                            <tr style="height:3vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td colspan=11>
                                    <textarea id="WorkExperience" class="font-rfs" rows=4 style="color:gray;border:none;width:100%;"></textarea>
                                </td>
                                <td style="border-top:0"></td>
                            </tr>
                            @*技能证书*@
                            <tr style="height:1vh">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="background-color:#5d6b98;color:white;font-weight:bold;border-bottom: 2px solid #5d6b98;"><i class="bi-command"></i> 技能证书</td>
                                <td style="background:url(/StaticFile/big_right.png) no-repeat;border-top:1px;border-bottom: 2px solid #5d6b98;"></td>
                                <td colspan=9 style="border-top:0; border-bottom: 2px solid #5d6b98;"></td>
                            </tr>
                            <tr style="height:3vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td colspan=11>
                                    <textarea id="SkillCertificate" class="font-rfs" rows=3 style="color:gray;border:none;width:100%;"></textarea>
                                </td>
                                <td style="border-top:0"></td>
                            </tr>
                            @*奖惩情况*@
                            <tr style="height:1vh">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="background-color:#5d6b98;color:white;font-weight:bold;border-bottom: 2px solid #5d6b98;"><i class="bi-flower1"></i> 奖惩情况</td>
                                <td style="background:url(/StaticFile/big_right.png) no-repeat;border-top:1px;border-bottom: 2px solid #5d6b98;"></td>
                                <td colspan=9 style="border-top:0; border-bottom: 2px solid #5d6b98;"></td>
                            </tr>
                            <tr style="height:3vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td colspan=11>
                                    <textarea id="Rewards" class="font-rfs" rows=3 style="color:gray;border:none;width:100%;"></textarea>
                                </td>
                                <td style="border-top:0"></td>
                            </tr>
                            @*自我介绍*@
                            <tr style="height:1vh">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="background-color:#5d6b98;color:white;font-weight:bold;border-bottom: 2px solid #5d6b98;"><i class="bi-flower2"></i> 自我介绍</td>
                                <td style="background:url(/StaticFile/big_right.png) no-repeat;border-top:1px;border-bottom: 2px solid #5d6b98;"></td>
                                <td colspan=9 style="border-top:0; border-bottom: 2px solid #5d6b98;"></td>
                            </tr>
                            <tr style="height:3vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td colspan=11>
                                    <textarea id="SelfIntroduction" class="font-rfs" rows=3 style="color:gray;border:none;width:100%;"></textarea>
                                </td>
                                <td style="border-top:0"></td>
                            </tr>
                            @*foot*@
                            <tr style="height:1vh;">
                                <td style="border-top:0" colspan=5></td>
                                <td style="background:url(/StaticFile/foot_left.png) no-repeat;background-size:cover;border-top:1px"></td>
                                <td style="background-color:#5d6b98;border-top:0" colspan=3></td>
                                <td style="background:url(/StaticFile/foot_right.png) no-repeat;background-size:cover;border-top:1px"></td>
                                <td style="border-top:0" colspan=5></td>
                            </tr>
                            <tr style="height:1vh;">
                                <td style="border-top:0;"></td>
                                <td style="background-color:#5d6b98;border-top:0" colspan=13></td>
                                <td style="border-top:0"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-12 ml-0 mr-0 tab-pane" id="tabAttachment" style="padding-left: 0px;padding-right: 0px;">@*附件管理*@
                <div class="row col-md-12" style="height:2vh"></div>
                <div class="row col-md-12">
                    <div class="row col-md-3" style="align-content:center">
                        <button id="UserManager-uploadHead" class="btn btn-rfs" style="margin-left:25%;"><i class="bi-image" style="color:#007bff"></i> 上传头像</button>
                    </div>
                    <div class="row col-md-9">
                        <div style="border-top:0;text-align:center;" colspan=4 rowspan=4><img id="HeadImg" class="btn-rfs" style="max-width:100%;height:auto" alt="暂无头像"></div>
                    </div>
                </div>
                <div class="row col-md-12" style="height:2vh"></div>
                <div class="row col-md-12">
                    <div class="row col-md-3" style="align-content:center">
                        <button id="UserManager-uploadSignature" class="btn btn-rfs" style="margin-left:25%;"><i class="bi-image" style="color:#007bff"></i> 上传签名</button>
                    </div>
                    <div class="row col-md-9">
                        <div style="border-top:0;text-align:center;line-height:10vh;" colspan=6 rowspan=4><img id="SignatureImg" class="btn-rfs" style="max-width:100%;height:auto" alt="暂无签名" src="/StaticFile/UserImg/admin.jpg"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 ml-0 mr-0 tab-pane" id="tabRole" style="padding-left: 0px;padding-right: 0px;">@*用户所属角色管理*@
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12">
                    <table id="UserManager-tabUserRoles" class="table table-striped table-bordered-modal table-sm table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th></th>
                                <th>角色名</th>
                            </tr>
                        </thead>
                        <tbody style="font-size: calc(0.6em + 0.1vw) !important"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="UserManager-Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="UserManager-Modal-Title" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <div id="UserManager-Modal-AddUser" style="display:none">
                    <div class="input-group">
                        <div class="col-3 pr-0">
                            <span class="input-group-text font-rfs border-radius-noright noRightBorder">登录名*</span>
                        </div>
                        <div class="col-9 pl-0">
                            <input id="UserManager-Modal-Name" class="form-control font-rfs border-radius-noleft" placeholder="必填" />
                        </div>
                    </div>
                    <div class="text-right">
                        <button id="UserManager-AddUser-confirm" class="btn btn-primary font-rfs">确定</button>
                        <button id="UserManager-AddUser-cancel" data-dismiss="modal" type="button" class="btn btn-info font-rfs">取消</button>
                    </div>
                </div>
                <div id="UserManager-Modal-UpdatePassword" style="display:none">
                    <div class="input-group">
                        <div class="col-3 pr-0">
                            <span class="input-group-text font-rfs border-radius-noright noRightBorder">新密码</span>
                        </div>
                        <div class="col-9 pl-0">
                            <input id="UserManager-Modal-Password" class="form-control font-rfs border-radius-noleft" placeholder="必填" />
                        </div>
                    </div>
                    <div class="input-group">
                        <div class="col-3 pr-0">
                            <span class="input-group-text font-rfs border-radius-noright noRightBorder">确认密码</span>
                        </div>
                        <div class="col-9 pl-0">
                            <input id="UserManager-Modal-rePassword" class="form-control font-rfs border-radius-noleft" placeholder="必填" />
                        </div>
                    </div>
                    <div class="text-right">
                        <button id="Modal-UpdatePassword-confirm" class="btn btn-primary font-rfs">确定</button>
                        <button id="Modal-UpdatePassword-cancel" data-dismiss="modal" type="button" class="btn btn-info font-rfs">取消</button>
                    </div>
                </div>
                <div id="UserManager-Modal-UpdateHead" class="input-group col-12" style="padding-bottom:10px;display:none">
                    <div class="col-2 pr-0 pl-0">
                        <span class="input-group-text font-rfs-modal border-radius-noright noRightBorder">上传文件</span>
                    </div>
                    <div class="col-10 pl-0 input-group">
                        <input id="UserManager-file" type="file" class="form-control font-rfs-modal border-radius-noleft" style="padding-top: 4px;"/>
                        <button id="UserManager-Modal-uploadHead" class="input-group-text font-rfs-modal border-radius-noleft noLeftBorder" style="padding-top: 0px; padding-bottom: 0px;display:none" title="上传头像">
                            <i class="bi-cloud-upload" style="font-size:18px"></i>
                        </button>
                        <button id="UserManager-Modal-uploadSignature" class="input-group-text font-rfs-modal border-radius-noleft noLeftBorder" style="padding-top: 0px; padding-bottom: 0px;display:none" title="上传签名">
                            <i class="bi-cloud-upload" style="font-size:18px"></i>
                        </button>
                    </div>
                </div>
                <div id="UserManager-Modal-Embed"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="UserManager-RemoveUser-Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p class="pt-3 pl-3 font-rfs">删除</p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <p id="UserManager-RemoveUser-Info" class="font-rfs"></p>
            </div>
            <div class="modal-Delete-footer">
                <button id="UserManager-RemoveUser-deleteUser" class="btn btn-outline-primary border-radius-noradius noLeftBorder noRightBorder font-rfs" style="width:50%; height:fit-content">删除</button>
                <button id="UserManager-RemoveUser-cancelUser" data-dismiss="modal" class="btn btn-outline-primary border-radius-noradius noRightBorder font-rfs" style="width:50%; height:fit-content">取消</button>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        var UserManager_UserName = "";
        var UserManager_UserID = "";

        $(document).ready(function () {
            LoadUsers();
        });

        function LoadUsers() {
            var columns = [{ field: "userName" }, { field: "fullName" }];

            UserManager_UserName = "";
            UserManager_UserID = "";
            $('#UserManager-tabUser').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            $('#UserManager-tabUser').bootstrapTable({
                method: 'post',
                url: "GetUsers",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                uniqueId: "userName",          // 设置主键
                locale: "zh-CN",
                columns: columns,
                silent: true,  //刷新事件必须设置
                queryParams: function (params) {
                    var data = {
                        limit: params.limit, // 每页显示多少条记录
                        offset: params.offset, // 偏移量
                    };
                    return data;
                },

                queryParamsType: "limit", 
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageNumber: 1,
                pageSize: 30,   // 默认页大小
                pageList: [10, 20, 30, 50, 100],  // 控制每页数目
                locale: "zh-CN",
                columns: columns,

                onClickRow: function (row, $element, field) {
                    $("#UserManager-tabUser").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                    UserManager_UserName = row.userName;
                    LoadUserCV(row.userName);
                    LoadRoles(row.userName);
                    $("#HeadImg").attr("src", "/StaticFile/UserImg/" + row.head);
                    $("#SignatureImg").attr("src", "/StaticFile/UserSignature/" + row.signature);
                },
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    $('.fixed-table-toolbar').css("height", "0px"); /* 隐藏表格上的工具栏 */
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#UserManager-tabUser').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }
        
        // 加载用户简历
        function LoadUserCV(userName) {
            $.post("GetUserInfo", {
                IdenUserName: userName
            }, function (data) {
                $("#FullName").val(data.fullName);
                $("#JobTitle").val(data.jobTitle);
                $("#DateOfBirth").val(data.dateOfBirth == null?"":data.dateOfBirth.split('T')[0]);
                $("#EmploymentDate").val(data.employmentDate == null ? "" : data.employmentDate.split('T')[0]);
                $("#Nation").val(data.nation);
                $("#Sex").val(data.sex);
                $("#NativePlace").val(data.nativePlace);
                $("#Education").val(data.education);
                $("#Politic").val(data.politic);
                $("#Major").val(data.major);
                $("#PhoneNumber").val(data.phoneNumber);
                $("#WentToSchool").val(data.wentToSchool);
                $("#Email").val(data.email);
                $("#Address").val(data.address);
                $("#EducationalBackground").val(data.educationalBackground);
                $("#WorkExperience").val(data.workExperience);
                $("#SkillCertificate").val(data.skillCertificate);
                $("#Rewards").val(data.rewards);
                $("#SelfIntroduction").val(data.selfIntroduction);
                $("#Head").attr("src", "/StaticFile/UserImg/" + data.head);
                UserManager_UserID = data.id;
            });
        }

        function SetEnableCortrol(value, row, index) {
            var strHtml = "";
            if (row.userRole) {
                strHtml = "<input type='checkbox' checked onclick='SetUserRole(this)'> ";
            } else {
                strHtml = "<input type='checkbox' onclick='SetUserRole(this)'> ";
            }

            return strHtml;
        };

        function SetUserRole(obj) {
            var UserName = UserManager_UserName;
            var RoleName = $(obj).parent().parent().find("td:eq(1)").text();

            $.post("SetUserRole", {
                UserName: UserName,
                RoleName: RoleName
            }, function (data) {
                if (data.indexOf("成功") == -1) {
                    alert(data);
                }
            });
        };

        function LoadRoles(userName) {
            $('#UserManager-tabUserRoles').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            var columns = [{ field: "id", visible: false }, { field: "userRoles", width: "5%", align: "center", formatter: SetEnableCortrol },
            { field: "name" }];

            $('#UserManager-tabUserRoles').bootstrapTable({
                method: 'post',
                url: "GetUserRoles",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        limit: params.limit, 
                        offset: params.offset,
                        UserName: userName
                    };
                    return data;
                },
                queryParamsType: "limit", // 服务器端分页，这个参数必需是“limit”
                dataField: "rows",

                uniqueId: "id",          // 设置主键
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageNumber: 1,
                pageSize: 20,   // 默认页大小
                pageList: [10, 20, 30, 50, 100],  // 控制每页数目
                locale: "zh-CN",
                columns: columns,
                onClickRow: function (row, $element, field) {
                    $("#UserManager-tabUserRoles").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                },
                silent: true,  //刷新事件必须设置
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#UserManager-tabUserRoles').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        };

        $("#UserManager-AddUser").click(function () {
            $("#UserManager-Modal-Title").text("添加用户");

            $("#UserManager-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });
            $("#UserManager-Modal-AddUser").css('display', 'block');
            $("#UserManager-Modal-UpdatePassword").css('display', 'none');
            $("#UserManager-Modal-UpdateHead").css('display', 'none');
        });

        $("#UserManager-AddUser-confirm").click(function () {
            var name = $("#UserManager-Modal-Name").val().replace(/[\s]/g, '');
            if (name.length == 0) {
                alert("用户名不能为空！");
                return;
            }

            $.post("CreateUser", {
                UserName: name
            }, function (data) {
                if (data.indexOf("成功") >= 0) {
                    $("#UserManager-Modal").modal('hide');
                    LoadUsers();
                } else {
                    alert(data);
                }
            });
        });

        $("#UserManager-RemoveUser").click(function (){
            if (UserManager_UserName == "") {
                alert("请先选择需要删除的用户！");
                return;
            }

            var st = "确定要删除用户：" + UserManager_UserName + " 吗？";
            $("#UserManager-RemoveUser-Info").html(st);
            $("#UserManager-RemoveUser-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $("#UserManager-RemoveUser-deleteUser").click(function() {
            $.post("DeleteUser", {
                UserName: UserManager_UserName
            }, function (data) {
                if (data.indexOf("成功") >= 0) {
                    $("#UserManager-RemoveUser-Modal").modal('hide');
                    LoadUsers();
                } else {
                    alert(data);
                }
            });
        });

        $("#UserManager-SetPassword").click(function () {
            if (UserManager_UserName == "") {
                alert("请先选择需要修改密码的用户！");
                return;
            }

            $("#UserManager-Modal-Title").text("修改密码");

            $("#UserManager-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });
            $("#UserManager-Modal-UpdatePassword").css('display', 'block');
            $("#UserManager-Modal-UpdateHead").css('display', 'none');
            $("#UserManager-Modal-AddUser").css('display', 'none');
        });

        $("#Modal-UpdatePassword-confirm").click(function () {
            var first = $("#UserManager-Modal-Password").val();
            var second = $("#UserManager-Modal-rePassword").val();
            alert(first);
            if (first.length == 0) {
                alert("新密码不能为空！");
                return;
            }

            if (second.length == 0) {
                alert("确认密码不能为空！");
                return;
            }

            if (first != second) {return "两次输入密码不一致！";}
            $.post("UpdatePasswork", {
                UserName: UserManager_UserName,
                Password: first
            }, function (data) {
                if (data.indexOf("成功") >= 0) {
                    $("#UserManager-Modal").modal('hide');
                } else {
                    alert(data);
                }
            });
        });

        $("#UserManager-SaveUser").click(function () {
            if (UserManager_UserID == "") {
                return;
            }

            var jsonStr = {};
            jsonStr["Id"] = UserManager_UserID;
            jsonStr["FullName"] = $.trim($("#FullName").val());
            jsonStr["JobTitle"] = $.trim($("#JobTitle").val());
            jsonStr["DateOfBirth"] = $.trim($("#DateOfBirth").val());
            jsonStr["EmploymentDate"] = $.trim($("#EmploymentDate").val());
            jsonStr["Nation"] = $.trim($("#Nation").val());
            jsonStr["Sex"] = $.trim($("#Sex").val());
            jsonStr["NativePlace"] = $.trim($("#NativePlace").val());
            jsonStr["Education"] = $.trim($("#Education").val());
            jsonStr["Politic"] = $.trim($("#Politic").val());
            jsonStr["Major"] = $.trim($("#Major").val());
            jsonStr["PhoneNumber"] = $.trim($("#PhoneNumber").val());
            jsonStr["WentToSchool"] = $.trim($("#WentToSchool").val());
            jsonStr["Email"] = $.trim($("#Email").val());
            jsonStr["Address"] = $.trim($("#Address").val());
            jsonStr["EducationalBackground"] = $.trim($("#EducationalBackground").val());
            jsonStr["WorkExperience"] = $.trim($("#WorkExperience").val());
            jsonStr["SkillCertificate"] = $.trim($("#SkillCertificate").val());
            jsonStr["Rewards"] = $.trim($("#Rewards").val());
            jsonStr["SelfIntroduction"] = $.trim($("#SelfIntroduction").val());

            $.post("UpdateUserInfo", {
                jsonStr: JSON.stringify(jsonStr)
            }, function (data) {
                alert(data);
            });
        });

        $("#UserManager-uploadHead").click(function () {
            if (UserManager_UserName == "") {
                alert("请先选择用户！");
                return;
            }

            $("#UserManager-Modal-Title").text("上传头像");
            $("#UserManager-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });
            $("#UserManager-Modal-UpdatePassword").css('display', 'none');
            $("#UserManager-Modal-AddUser").css('display', 'none');
            $("#UserManager-Modal-UpdateHead").css('display', 'flex');
            $("#UserManager-Modal-uploadHead").css('display', 'flex');
            $("#UserManager-Modal-uploadSignature").css('display', 'none');
            $("#UserManager-file").attr('accept', '.jpg');
        });

        $("#UserManager-uploadSignature").click(function () {
            if (UserManager_UserName == "") {
                alert("请先选择用户！");
                return;
            }

            $("#UserManager-Modal-Title").text("上传签名");
            $("#UserManager-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $("#UserManager-Modal-UpdateHead").css('display', 'flex');
            $("#UserManager-Modal-uploadHead").css('display', 'none');
            $("#UserManager-Modal-uploadSignature").css('display', 'flex');
            $("#UserManager-file").attr('accept', '.jpg,.png');
        });

        $("#UserManager-Modal-uploadHead").click(function (event) {
            var formData = new FormData();
            var name = $("#UserManager-file").val();
            if (name.indexOf("jpg") == -1) {
                alert("头像只能是 jpg 类型文件！");
                return;
            }

            $.each($("#UserManager-file")[0].files, function (index, value) {
                formData.append('file', $("#UserManager-file")[0].files[index]);
            });
            formData.append("Domain", "UserImg"); // 上传文件时附加的参数
            formData.append("DomainId", UserManager_UserID);

            $.ajax({
                url: '/Common/UploadUserImg',
                type: 'POST',
                data: formData,
                async: true,
                cache: false,
                processData: false,// 告诉jQuery不要去处理发送的数据
                contentType: false,// 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    $("#UserManager-Modal").modal('hide');
                    $("#HeadImg").attr("src", "/StaticFile/UserImg/" + UserManager_UserID + ".jpg");
                },
                error: function (returndata) {
                    alert(returndata);
                }
            });
        });

        $("#UserManager-Modal-uploadSignature").click(function (event) {
            var formData = new FormData();
            var name = $("#UserManager-file").val();
            if (name.indexOf("jpg") != -1 && name.indexOf("png") != -1) {
                alert("签名只能是 jpg 或 png 类型文件！");
                return;
            }

            $.each($("#UserManager-file")[0].files, function (index, value) {
                formData.append('file', $("#UserManager-file")[0].files[index]);
            });
            formData.append("Domain", "UserImg"); // 上传文件时附加的参数
            formData.append("DomainId", UserManager_UserID);
            formData.append("CreateById", "1");
            formData.append("CreateByName", "admin");

            $.ajax({
                url: '/Common/UploadUserSignature',
                type: 'POST',
                data: formData,
                async: true,
                cache: false,
                processData: false,// 告诉jQuery不要去处理发送的数据
                contentType: false,// 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    $("#UserManager-Modal").modal('hide');
                    $("#SignatureImg").attr("src", "/StaticFile/UserSignature/" + data);
                },
                error: function (returndata) {
                    alert(returndata);
                }
            });
        });

        $("#li-tabUserBaseInfo").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-first-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
                if ($(this).attr("class").indexOf('tab-first-noactive') > 0) {
                    $(this).removeClass('tab-first-noactive');
                    $(this).addClass('tab-first-noactive-mouse');
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-first-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-first-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-first-noactive');
                }
            });

        $("#li-tabUserList").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-other-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
                if ($(this).attr("class").indexOf('tab-other-noactive') > 0) {
                    $(this).removeClass('tab-other-noactive');
                    $(this).addClass('tab-other-noactive-mouse');
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-other-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-other-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-other-noactive');
                }
            });

        $("#li-tabAttachment").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-other-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
                if ($(this).attr("class").indexOf('tab-other-noactive') > 0) {
                    $(this).removeClass('tab-other-noactive');
                    $(this).addClass('tab-other-noactive-mouse');
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-other-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-other-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-other-noactive');
                }
            });

        $("#li-tabRole").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-other-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
                if ($(this).attr("class").indexOf('tab-other-noactive') > 0) {
                    $(this).removeClass('tab-other-noactive');
                    $(this).addClass('tab-other-noactive-mouse');
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-other-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-other-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-other-noactive');
                }
            });

        $("#a-tabUserInfo").click(function () {
            if ($("#li-tabAttachment").attr("class").indexOf('tab-other-active') > 0) {
                $("#li-tabAttachment").removeClass('tab-other-active');
                $("#li-tabAttachment").addClass('tab-other-noactive');
            }

            if ($("#li-tabRole").attr("class").indexOf('tab-other-active') > 0) {
                $("#li-tabRole").removeClass('tab-other-active');
                $("#li-tabRole").addClass('tab-other-noactive');
            }

            $("#li-tabUserBaseInfo").attr("data-active", true);
            $("#li-tabAttachment").attr("data-active", false);
            $("#li-tabRole").attr("data-active", false);
        });

        $("#a-tabAttachment").click(function () {
            if ($("#li-tabUserBaseInfo").attr("class").indexOf('tab-first-active') > 0) {
                $("#li-tabUserBaseInfo").removeClass('tab-first-active');
                $("#li-tabUserBaseInfo").addClass('tab-first-noactive');
            }

            if ($("#li-tabRole").attr("class").indexOf('tab-other-active') > 0) {
                $("#li-tabRole").removeClass('tab-other-active');
                $("#li-tabRole").addClass('tab-other-noactive');
            }

            $("#li-tabAttachment").attr("data-active", true);
            $("#li-tabUserBaseInfo").attr("data-active", false);
            $("#li-tabRole").attr("data-active", false);
        });

        $("#a-tabRole").click(function () {
            if ($("#li-tabUserBaseInfo").attr("class").indexOf('tab-first-active') > 0) {
                $("#li-tabUserBaseInfo").removeClass('tab-first-active');
                $("#li-tabUserBaseInfo").addClass('tab-first-noactive');
            }
            if ($("#li-tabAttachment").attr("class").indexOf('tab-other-active') > 0) {
                $("#li-tabAttachment").removeClass('tab-other-active');
                $("#li-tabAttachment").addClass('tab-other-noactive');
            }

            $("#li-tabRole").attr("data-active", true);
            $("#li-tabUserBaseInfo").attr("data-active", false);
            $("#li-tabAttachment").attr("data-active", false);
        });

    </script>
}
